<template>
  <div class="zw-member">
    <div class="zw-header">
      <div class="zw-header--row">
        <div class="zw-header__col">
          <p class="title">获得积分</p>
          <p class="value zw-large">{{channelList.statistics && channelList.statistics.credit || 0}}</p>
        </div>
      </div>
      <div class="zw-header--row is-br">
        <div class="zw-header__col">
          <p class="title">总销售额</p>
          <p class="value">{{channelList.statistics && channelList.statistics.sales || 0}}</p>
        </div>
        <div class="zw-header__col">
          <p class="title">订单总数</p>
          <p class="value">{{channelList.statistics && channelList.statistics.orderNumber || 0}}</p>
        </div>
      </div>
    </div>
    <div class="zw-card" v-for="channel in channelList.channels">
      <div class="zw-card--row zw-col-lr">
        <p><span class="zw-large">{{channel.channelName}}</span><small class="small zw-gray">{{channel.phone}}</small></p>
        <p><small class="small zw-gray">提成比例</small><span class="zw-large">{{channel.proportion}}%</span></p>
      </div>
      <ul class="zw-card--row is-br">
        <li>
          <p class="title">订单数</p>
          <p class="value">{{channel.channelOrderNumber}}</p>
        </li>
        <li>
          <p class="title">购买金额</p>
          <p class="value">{{channel.sales}}</p>
        </li>
        <li>
          <p class="title">获得积分</p>
          <p class="value">{{channel.channelCredit}}</p>
        </li>
      </ul>
      <div class="zw-card is-inner">
        <div class="zw-card--row zw-col-lr">
          <p><span class="zw-small zw-gray">II渠道商</span></p>
          <p class="btn" @click="next(channel.channelId,channel.channelName)">查看详情</p>
        </div>
        <ul class="zw-card--row is-br">
          <li>
            <p class="title">订单数</p>
            <p class="value">{{channel.secondTeamInfo&&channel.secondTeamInfo.channelOrderNumber || 0}}</p>
          </li>
          <li>
            <p class="title">购买金额</p>
            <p class="value">{{channel.secondTeamInfo&&channel.secondTeamInfo.sales || 0}}</p>
          </li>
          <li>
            <p class="title">获得积分</p>
            <p class="value">{{channel.secondTeamInfo&&channel.secondTeamInfo.channelCredit || 0}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="channelList.channels.length==0">
      <p class="no-term">暂无团队</p>
    </div>
    <div class="zw-footer" @click="onResultChange(true)"><span style="font-size:32px;">+</span>新增渠道商</div>
    <add-channel :popup-visible="popupVisible" @on-result-change="onResultChange"></add-channel>
  </div>
</template>
<script>
import { Toast, Indicator } from 'mint-ui';
import { mapActions, mapGetters } from 'vuex';
import sharePop from "components/sharePop"
import { getRedeemReward } from "api/moneyBack"
import { wxshare } from 'common/mixin'
import addChannel from './addChannel';

export default {
  mixins: [wxshare],
  components: { addChannel },
  data() {
    return {
      popupVisible: false,
      channelList: {
        statistics: {},
        channels: []
      }
    }
  },
  watch: {
    '$route' (to, from) {
      this.getList();
    }
  },
  methods: {
    ...mapActions({
      LowerChannel: 'LowerChannel_n',
    }),
    next(id, name) {
      // console.log(id, name)
      let title = `${name}的下级渠道（我的二级渠道）`
      this.$router.push({ path: '/channel/channelTwo', query: { id, name: title } });
    },
    onResultChange(val) {
      this.popupVisible = val;
    },
    getList() {
      Indicator.open();
      console.log(this.$route.query.id)
      this.LowerChannel({ channelId: '' }).then(result => {
        this.channelList = result;
        console.log(result)
        Indicator.close();
      }, error => {
        Indicator.close();
      })
    }
  },
  mounted() {
    this.getList();
  },
}

</script>
<style scoped>
@import './channelList.css';

.no-term {
  margin-top: 5rem;
  font-size: 1rem;
  color: #ccc;
}






/*@import './channelList.less';*/

</style>
